<template>
	<view class="listItem" @click="onClick">
		<view class="header">
			<image class="url" :src=" (IP + info.url) || '../../static/index/test/bgi.jpg'" mode="aspectFill"></image>
			<span v-show="info.number > 0">{{info.number}}</span>
		</view>
		<view class="text">{{ info.name }}</view>
		<span class="rightText">{{ info.time }}</span>
	</view>
</template>

<script>
		import {IP} from '../../network/requestUrl.js'
	export default {
		props: {
			info: {
				type: Object,
				default () {
					return {
						id: 0,
						name: '昵称',
						url: '',
						time: '2021-2-20 13:04',
						phone: 0,
						number: 0
					}
				}
			},
			isPerple: Boolean
		},
		data() {
			return {
				IP
			};
		},
		methods: {
			onClick() {
				this.info.number = 0;
				this.$store.commit('setGatherNumber', {
					lost_id: this.isPerple ? this.info.phone : this.info.id,
					number: 0
				})
				uni.navigateTo({
					url: `/pages/chatList/chatDetail/chatDetail?id=${this.isPerple ? this.info.phone : this.info.id}&name=${this.info.name}`,
					
					fail: (err) => {
						console.log(err)
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listItem {
		display: flex;
		align-items: center;
		position: relative;
		padding: 13px 10px;
		&:active {
			background-color: #F2EEEE;
		}
		&:nth-of-type(n+2) {
			border-top: 1px solid $uni-bg-page;
		}

		.header {
			position: relative;
			.url {
				width: 35px;
				height: 35px;
				border-radius: 3px;
			}
			span {
				top: 2px;
				right: 2px;
				width: 15px;
				height: 15px;
				font-size: 10px;
				line-height: 15px;
				text-align: center;
				border-radius: 50%;
				color: white;
				background-color: orange;
				display: inline-block;
				position: absolute;
			}
		}

		.text {
			margin: 0 10px;
			font-size: 14px;
		}

		.rightText {
			position: absolute;
			right: 10px;
			font-size: 12px;
			color: $uni-text-color-grey;
		}
	}
</style>
